import { __awaiter, __generator } from "tslib";
import { TabsDefaultProps } from './props';
import fmtEvent from '../_util/fmtEvent';
import createValue from '../mixins/value';
function getBoundingClientRect(selector) {
    return new Promise(function (resolve, reject) {
        my.createSelectorQuery()
            .select(selector)
            .boundingClientRect()
            .exec(function (ret) {
            if (ret && ret[0]) {
                resolve(ret[0]);
                return;
            }
            reject();
        });
    });
}
Component({
    props: TabsDefaultProps,
    data: {
        scrollLeft: 0,
        leftFade: false,
        rightFade: false,
    },
    mixins: [createValue({
            valueKey: 'current',
            defaultValueKey: 'defaultCurrent',
        })],
    scrollLeft: 0,
    scrollTop: 0,
    didMount: function () {
        this.updateScroll();
    },
    didUpdate: function (prevProps, prevData) {
        if (prevProps.items !== this.props.items || !this.isEqualValue(prevData)) {
            this.updateScroll();
        }
    },
    methods: {
        onScroll: function (e) {
            return __awaiter(this, void 0, void 0, function () {
                return __generator(this, function (_a) {
                    if (this.props.direction === 'vertical') {
                        this.scrollTop = e.detail.scrollTop;
                        return [2 /*return*/];
                    }
                    this.scrollLeft = e.detail.scrollLeft;
                    this.updateFade();
                    return [2 /*return*/];
                });
            });
        },
        updateFade: function () {
            return __awaiter(this, void 0, void 0, function () {
                var _a, view, item;
                return __generator(this, function (_b) {
                    switch (_b.label) {
                        case 0:
                            this.setData({
                                leftFade: !!this.scrollLeft,
                            });
                            return [4 /*yield*/, Promise.all([
                                    getBoundingClientRect("#ant-tabs-bar-scroll-view-".concat(this.$id)),
                                    getBoundingClientRect("#ant-tabs-bar-item-".concat(this.$id, "-").concat(this.props.items.length - 1)),
                                ])];
                        case 1:
                            _a = _b.sent(), view = _a[0], item = _a[1];
                            this.setData({
                                rightFade: item.left + item.width / 2 > view.width,
                            });
                            return [2 /*return*/];
                    }
                });
            });
        },
        updateScroll: function () {
            return __awaiter(this, void 0, void 0, function () {
                var current, _a, view, item, scrollTop, needScroll_1, distance, scrollLeft, needScroll, distance;
                return __generator(this, function (_b) {
                    switch (_b.label) {
                        case 0:
                            current = this.getValue();
                            return [4 /*yield*/, Promise.all([
                                    getBoundingClientRect("#ant-tabs-bar-scroll-view-".concat(this.$id)),
                                    getBoundingClientRect("#ant-tabs-bar-item-".concat(this.$id, "-").concat(current)),
                                ])];
                        case 1:
                            _a = _b.sent(), view = _a[0], item = _a[1];
                            if (this.props.direction === 'vertical') {
                                scrollTop = this.scrollTop || 0;
                                needScroll_1 = false;
                                if (this.props.scrollMode === 'center') {
                                    needScroll_1 = true;
                                    scrollTop += (item.top - view.top) - Math.max((view.height - item.height) / 2, 0);
                                }
                                else {
                                    distance = item.top - view.top;
                                    if (distance < 0) {
                                        scrollTop += distance;
                                        needScroll_1 = true;
                                    }
                                    else if (distance + item.height > view.height) {
                                        scrollTop += Math.min(distance + item.height - view.height, distance);
                                        needScroll_1 = true;
                                    }
                                }
                                if (needScroll_1) {
                                    if (scrollTop === this.data.scrollTop) {
                                        scrollTop += Math.random();
                                    }
                                    this.setData({
                                        scrollTop: scrollTop,
                                    });
                                }
                                return [2 /*return*/];
                            }
                            scrollLeft = this.scrollLeft || 0;
                            needScroll = false;
                            if (this.props.scrollMode === 'center') {
                                needScroll = true;
                                scrollLeft += (item.left - view.left) - Math.max((view.width - item.width) / 2, 0);
                            }
                            else {
                                distance = item.left - view.left;
                                if (distance < 0) {
                                    scrollLeft += distance;
                                    needScroll = true;
                                }
                                else if (distance + item.width > view.width) {
                                    scrollLeft += Math.min(distance + item.width - view.width, distance);
                                    needScroll = true;
                                }
                            }
                            if (needScroll) {
                                if (scrollLeft === this.data.scrollLeft) {
                                    scrollLeft += Math.random();
                                }
                                this.setData({
                                    scrollLeft: scrollLeft,
                                });
                                this.updateFade();
                            }
                            return [2 /*return*/];
                    }
                });
            });
        },
        scroll: function (scrollLeft) {
            this.setData({
                scrollLeft: this.data.scrollLeft === scrollLeft ? scrollLeft - Math.random() : scrollLeft,
            });
        },
        onChange: function (e) {
            var onChange = this.props.onChange;
            var index = parseInt(e.currentTarget.dataset.index, 10);
            if (this.props.items[index].disabled) {
                return;
            }
            if (this.getValue() === index) {
                return;
            }
            if (!this.isControlled()) {
                this.update(index);
            }
            if (onChange) {
                onChange(index, fmtEvent(this.props, e));
            }
        },
    }
});
